@charset "utf-8"
*{
	margin: 0;
	padding: 0;
	font-family:楷体;
	
}
body{
	position: relative;
	background: url(../img1/XX.jpg);
	background-size: 100% 638px;
	background-repeat:no-repeat;
}
.sun{
	width: 150px;
	height: 150px;
	position: absolute;
	top: 20px;
	left: 1100px; 
	background: url(../img1/4.gif) no-repeat;
	background-size: cover;
}
.xiaoxin{
	width: 150px;
	height: 200px;		
	background: url(../img1/3.gif);
	background-size:100% 100%;
	position: absolute;
	top: 430px;
	left: -12px;
	animation: xiaoxin 20s linear 1 forwards;	
	}
.item1{
	 width: 60px;
	 height: 60px;
	 position: absolute;
	 top: -100px;
	 left: 300px; 
	 background: url(../img1/6.png) no-repeat;
	 background-size: cover;
	 animation: item1 3s linear 1;
				}
	.item2 {
	     width: 100px;
	     height: 100px;
	     position: absolute;
	     top: -100px;
	     left: 820px; 
	     background: url(../img1/7.gif) no-repeat;
	     background-size: cover;
		animation: item2 6s linear  1;
				}
	.item3 {
	  width: 80px;
	  height: 80px;
	  position: absolute;
	  top: -100px; 
	  left: 50%;
	  transform: translateX(-50%);
	  background: url(../img1/8.png) no-repeat; 
	  background-size: cover; 
	  animation: item3 6s linear 1;
	  animation-delay: 9s; 
	}
		.item4{
		  width: 80px;
		  height: 80px;
		  position: absolute;
		  top: -100px; 
		  left: 30%;
		  transform: translateX(-50%);
		  background: url(../img1/9.png) no-repeat; 
		  background-size: cover;
		  animation: item4 6s linear 1;
		  animation-delay: 11s; 		
	}	
		.item5{
		  width: 80px;
		  height: 80px;
		  position: absolute;
		  top: -100px; 
		  left: 80%;
		  transform: translateX(-50%);
		  background: url(../img1/10.png) no-repeat; 
		  background-size: cover;	 
		  animation: item4 6s linear 1;
		  animation-delay: 6s; 	
	}
	.score-box {
           width: 200px;
           height: 150px;
           margin: 50px auto;
           background: #fff;
           border: 2px solid #ff6b6b;
           text-align: center;
           padding-top: 30px;      
           opacity: 0;
           animation: showScore 0s 20s forwards;
	        }     
	
	 .score-box span {
	     color: red;
	     font-size: 20px;
	     font-weight: bold;
		} 	
	@keyframes showScore {
	    to { opacity: 1; }
	}
	@keyframes xiaoxin {
	  0% { left: -140px; }  
	  50% { left: 1300px; } 
	  100% { left: -150px; }
	}		
	 @keyframes item1 {
		  0% { 
			  top: -100px;
			}            
		 100% { 
			 top: 450px; 
		 }         
		        }
    @keyframes item2 {
		  0% { 
			  top: -100px;
			}            
		 100% { 
			 top: 450px; 
		 }         
		        }		
	@keyframes item3{
		0% {
			 top: -100px;
					}            
		100% { 
			 top: 500px; 
	}
	}
	@keyframes item4{
		0% {
			 top: -100px;
					}            
		100% { 
			 top: 500px; 
			 }
		}
	@keyframes item5{
		0% {
			 top: -100px;
					}            
		100% { 
			 top: 500px; 
			 }		
	 }
	}
}